<template>
	<el-card class="box-card h100" :style="themeOpacity">
		<div slot="header" :class="['clearfix', isDraggable ? 'draggable-move-clazz' : '']">
			<span>学校发文</span>
			<!--      <div class="data-choose">-->
			<!--        <span class="month">本月</span>-->
			<!--        <span class="week">本周</span>-->
			<!--        <span class="yesterday">昨天</span>-->
			<!--      </div>-->
		</div>
		<el-row :gutter="5">
			<el-col :span="24" class="card-one-item" v-for="item in list">
				<div @click='btn_url(item)'>
					<el-row class="mb10">
						<el-col :span="15" class="card-introd">
							<span class="theme-less-font-color">[学校发文]</span>
							<span>{{item.docSubject}}</span>
						</el-col>
						<el-col :span="8" :offset="1" class="card-info font-gray">
							<span>{{item.fdName}}</span>
							<span>{{item.docPublishTime.split("T")[0]}}</span>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<div class="gdbox card-one-item el-col el-col-24" @click="more_url()" v-if="list.length>0">
				查看更多
			</div>
			<!--      <el-col :span="24" class="card-one-item">
        <el-row class="mb10">
          <el-col :span="15" class="card-introd">
            <span class="theme-less-font-color">[通知公告]</span>
            <span>关于召开2020年高级职称评审答辩</span>
          </el-col>
          <el-col :span="8" :offset="1" class="card-info font-gray">
            <span>人力支援部</span>
            <span>2021-04-01</span>
          </el-col>
        </el-row>
      </el-col> -->
		</el-row>
		<div class="z_box" v-show="show">
			<div class="box">
				<i class="el-icon-close close" @click='close()'></i>
				<div class="title">{{obj.docSubject}}</div>
				<div v-html='obj.docContent' class="content">
				</div>
				<div class="download-wrapper">
				   <div v-for="(item,index) in obj.oaAttachList" :key="item.fdFileId" v-show="obj.oaAttachList.length > 0">
				     <el-link @click="gotoFilePage(item.fdFileId)" type="primary" class="download-href"
				       >附件{{index+1}}: {{item.fdFileName}}</el-link
				     >
				   </div>
				 </div>

			</div>
		</div>
	</el-card>
</template>

<script>
	import {
		mixin
	} from '@/mixin'
	import {
		getInfo,
		getOa
	} from '@/api/public/index.js'
	export default {
		name: 'Paper',
		data() {
			return {
				list: [],
				show: false,
				obj: ""
			}
		},
		props: {
			isDraggable: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			getInfo().then(res => {
				if (res.code == 200) {
					this.list = res.data.post
				} else {
					this.$message({
						showClose: true,
						message: res.msg
					});
				}
			})
		},
		methods: {
			btn_url(item) {
				getOa(item.fdId).then(res => {
					if (res.code == 200) {
						this.obj=res.data
						this.show=true
					}
				})


			},
			gotoFilePage(fdId) {
				if(fdId) {
				  window.open('javascript:window.name;', '<script>location.replace("http://office.ncpu.edu.cn/sys/attachment/sys_att_main/sysAttMain.do?method=view&fdId='+fdId+'")<\/script>');
				}
			},
			close() {
				this.show = false
			},
			more_url() {
				window.location.href = "/client/notice?id=1"
			},
		},
		mixins: [mixin]
	}
</script>

<style scoped lang="scss">
	.card-one-item {
		.card-introd {
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.card-info {
			font-size: 12px;
			display: flex;
			justify-content: space-between;
		}
	}

	.data-choose {
		display: flex;
		float: right;
		font-size: 12px;
		width: 150px;
		justify-content: space-around;
		align-items: center;
		color: #939ecd;

		&>span::before {
			content: '';
			display: inline-block;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 3px;
		}

		span.month::before {
			background-color: #31c2e2;
		}

		span.week::before {
			background-color: #f67a7b;
		}

		span.yesterday::before {
			background-color: #a2bce3;
		}
	}

	.font-blue {
		color: #3672fe;
	}

	.z_box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgb(0, 0, 0, 0.3);
		z-index: 999;
	}

	.box {
		position: absolute;
		max-width: 1500px;
		min-width: 1000px;
		height: 600px;
		background-color: #fff;
		color: #000;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		z-index: 999;
	}

	.content {
		height: 90%;
		overflow-y: scroll;
		padding: 20px 30px;
	}

	.btn {
		width: 100px;
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		font-size: 20px;
		font-weight: bold;
		padding: 0 50px;
	}

	.close {
		position: absolute;
		right: 20px;
		top: 10px;
		font-size: 24px;
	}

	.mb10 {
		cursor: pointer;
	}

	.font-gray span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gdbox {
		font-size: 12px;
		color: #1890FF;
		text-align: center;
		cursor: pointer;
	}
	
	.download-wrapper {
	  font-size: 18px;
	  margin: 24px 12px 0;
	  .download-href {
	    margin-bottom: 10px;
	  }
	}
</style>
